<template>
  <div
    class="
      banner
      w-full
      lg:h-40
      h-24
      flex flex-col
      items-center
      justify-center
      text-white
      py-10
    "
  >
    <span class="lg:text-3xl text-lg font-bold">
      <slot name="title"></slot>
    </span>
    <span class="lg:text-lg lg:mt-4 mt-2 text-[13px]">
      <slot name="subtitle"></slot>
    </span>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.banner {
  background: url("@/assets/img/kid-banner.png");
  background-size: cover;
  background-repeat: no-repeat;
}
</style>